| |
| 今回のテクニックでは、メニューやサブメニューが表示される位置を指定しなければいけません。このためには、各「DIV」タグのサイズを固定する必要があります。以下のように、「menu」「submenu」といったクラスのスタイルシートを作成し、サイズを固定しておきましょう。今回は「menu」のサイズを幅100×高さ25ピクセル、「submenu」のサイズを幅100ピクセル（高さは可変です）に指定しました。また、それぞれのクラスについて、背景色、枠線、文字の書式の指定も行います。そのほか、リンク文字について「下線なし」、文字色を「白」に指定します。
|
<STYLE type="text/css">
<!--
.menu{
width:100px; /* 幅（100px） */
height:25px; /* 高さ（25px） */
color:#FFFFFF; /* 文字色（白） */
font-size:12pt; /* 文字サイズ（12pt） */
text-align:center; /* 文字（中央揃え） */
background-color:#0000AA; /* 背景色（青） */
border-style:solid; /* 枠線（四角） */
border-width:3px; /* 枠線の幅（3px） */
border-color:#8888FF; /* 枠線の色（薄い青） */
}
.submenu{
width:100px; /* 幅（100px） */
font-size:12pt; /* 文字サイズ（12pt） */
text-align:center; /* 文字（中央揃え） */
background-color:#AAAAFF; /* 背景色（薄い青） */
border-style:solid; /* 枠線（四角） */
border-width:1px; /* 枠線の幅（1px） */
border-color:#888888; /* 枠線の色（グレー） */
}
a{text-decoration:none} /* リンクの飾り（なし） */
a:link{color:#FFFFFF} /* リンクの色（白） */
a:visited{color:#FFFFFF} /* 訪問済みリンクの色（白） */
//-->
</STYLE>
|
|
